<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>快递管理系统</title>
    <meta name="Copyright" content="Douco Design."/>
    <link href="css/public.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/global.js"></script>
</head>
<body>
<div id="dcWrap">
    <div id="dcHead">
        <div id="head">
            <div class="logo"><a href="index.html"><img width="100px"
                                                        height="25px" src="images/dclogo.gif" alt="logo"></a></div>
            <div class="nav">
                <ul class="navRight">
                    <li class="M noLeft"><a href="JavaScript:void(0);">您好，admin</a>
                        <div class="drop mUser">
                            <a href="password.html">修改密码</a>
                        </div>
                    </li>
                    <li class="noRight"><a href="login.php?rec=logout">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- dcHead 结束 -->
    <div id="dcLeft">
        <div id="menu">
            <ul class="top">
                <li><a href="index.html"><i class="home"></i><em>管理首页</em></a></li>
            </ul>
            <ul>
                <li><a href="password.html"><i
                        class="system"></i><em>修改密码</em></a></li>
                <li><a href="list.html"><i class="nav"></i><em>快递管理</em></a></li>
            </ul>
        </div>
    </div>
    <div id="dcMain">
        <!-- 当前位置 -->
        <div id="urHere">快递管理系统<b>></b><strong>修改密码</strong></div>
        <div id="manager" class="mainBox"
             style="height:auto!important;height:550px;min-height:550px;">
            <h3><a href="index.html" class="actionBtn">返回首页</a>修改密码</h3>
            <form action="#" method="post" onsubmit="return checkForm()">
                <table width="100%" border="0" cellpadding="8" cellspacing="0"
                       class="tableBasic">
                    <tr>
                        <td width="100" align="right">原始密码</td>
                        <td>
                            <input id="oldPwdInput" type="password" name="password" onchange="checkPassword()" size="40"
                                   class="inpMain"/>
                            &nbsp; &nbsp; <span id="oldPwdMsg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right">新密码</td>
                        <td>
                            <input id="newPwdInput" type="password" name="newpassword" onchange="checkNewPassword()"
                                   size="40" class="inpMain"/>
                            &nbsp; &nbsp; <span id="newPwdMsg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码</td>
                        <td>
                            <input id="rePwdInput" type="password" name="repassword" onchange="checkRePassword()"
                                   size="40"
                                   class="inpMain"/>
                            &nbsp; &nbsp; <span id="rePwdMsg"></span>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="submit" name="submit" class="btn" value="提交"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    <div id="dcFooter">
        <div id="footer">
            <div class="line"></div>
            <ul>
                版权所有 © 2024-2025 尚硅谷教育，并保留所有权利。
            </ul>
        </div>
    </div><!-- dcFooter 结束 -->
    <div class="clear"></div>
</div>
</body>
<script>
    //1.定义一个变量,表示密码的正则表达式
    var passwordReg = /^[a-zA-Z0-9]{6,12}$/;
    //2.定义三个变量,代表表单是否能提交
    var passwordFlag;
    var newPasswordFlag;
    var rePasswordFlag;

    //3.校验密码
    function checkPassword() {
        //获取原始密码输入框中的value
        var passwordValue = document.getElementById("oldPwdInput").value;
        //获取原始密码对应的span,用于将来设置提示信息
        var passwordSpan = document.getElementById("oldPwdMsg");
        //校验正则表达式
        if (passwordReg.test(passwordValue)) {
            passwordSpan.innerHTML = "<font style='color:green'>密码格式正确</font>";
            passwordFlag = true;
        }else{
            passwordSpan.innerHTML = "<font style='color:red'>密码格式不正确</font>";
            passwordFlag = false;
        }
    }

    //4.校验新密码
    function checkNewPassword(){
        //获取新密码输入框的value值
        var newPasswordValue = document.getElementById("newPwdInput").value;
        //获取新密码对应的span,用于将来设置提示信息
        var newPasswordSpan = document.getElementById("newPwdMsg");
        //校验正则表达式
        if (passwordReg.test(newPasswordValue)) {
            newPasswordSpan.innerHTML = "<font style='color:green'>新密码格式正确</font>";
            newPasswordFlag = true;
        }else{
            newPasswordSpan.innerHTML = "<font style='color:red'>新密码格式不正确</font>";
            newPasswordFlag = false;
        }
    }

    //5.校验确认密码
    function checkRePassword(){
        //获取确认密码输入框中的value值
        var rePasswordValue = document.getElementById("rePwdInput").value;
        //获取新密码输入框中的value值
        var newPasswordValue = document.getElementById("newPwdInput").value;

        //获取确认密码的span,用于将来设置提示信息
        var rePasswordSpan = document.getElementById("rePwdMsg");
        //比较新密码和确认密码的内容是否一样
        if (rePasswordValue==newPasswordValue){
            rePasswordSpan.innerHTML = "<font style='color:green'>密码一致</font>";
            rePasswordFlag = true;
        }else{
            rePasswordSpan.innerHTML = "<font style='color:red'>密码不一致</font>";
            rePasswordFlag = false;
        }

    }

    //6.判断表单是否能提交
    function checkForm(){
        return passwordFlag&&newPasswordFlag&&rePasswordFlag;
    }
</script>
</html>